<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>

</head>

<body>
<div id="app1">

    <!-- 回到顶部 -->
    <template>
        <el-backtop></el-backtop>
    </template>


    <!-- 添加评论 -->
    <div v-if="addCommentsModel" style="text-align: left;">
        <el-row>
            <h2 style="float: left;margin:35px 150px 5px 150px;">请对该次就餐做出评价：</h2><br/>
        </el-row>
        <el-card style="background-color: #fff;border-radius: 10px;margin:0px 150px;">
            <el-row>
                <el-col :span="24" style="font-size: 18px;">在这里添加评论</el-col>
            </el-row>
            <el-row style="margin: 10px 0px 0px 0px;">
                <el-col :span="2" :offset="6">味道：</el-col>
                <el-col :span="4.5">
                    <el-rate v-model="addComment.score1" :colors="gradeColors" show-score>
                    </el-rate>
                </el-col>
            </el-row>
            <el-row style="margin: 1px 0px;">
                <el-col :span="2" :offset="6">环境：</el-col>
                <el-col :span="4.5" style="float: left;">
                    <el-rate v-model="addComment.score2" :colors="gradeColors" show-score>
                    </el-rate>
                </el-col>
            </el-row>
            <el-row style="margin: 1px 0px 10px 1px;">
                <el-col :span="2" :offset="6">服务：</el-col>
                <el-col :span="4.5" style="float: left;">
                    <el-rate v-model="addComment.score3" :colors="gradeColors" show-score>
                    </el-rate>
                </el-col>
            </el-row>
            <el-row style="margin: 10px 0px;">
                <el-col :span="10" :offset="6">
                    <el-input type="textarea" placeholder="请输入内容" v-model="addComment.comments"
                              maxlength="200" show-word-limit rows="5"></el-input>
                </el-col>
            </el-row>
            <el-row style="margin: 10px 0px;">
                <el-col :span="4.5" :offset="6">
                    <el-upload class="upload-demo" action="a" ref="upload"
                               :on-preview="handleCommentFilePreview" :on-change="fileChanges"
                               :on-remove="handleCommentFileRemove" :file-list="fileList1"
                               list-type="picture-card"
                               :auto-upload="false" multiple :http-request="uploadFile">
                        <el-button size="small" type="primary">选取图片</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-col>
            </el-row>
            <!--点击一下图片 放大：-->
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

            <el-row style="margin: 10px 0px;">
                <el-col :span="4.5" :offset="10">
                    <el-button style="margin-left: 10px;" size="small" type="success"
                               @click="submitCommentFileUpload">
                        提交评论
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>


</div>

<script src="vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="jquery-3.4.1.js"></script>
<script src="moment.js"></script>
<script>

    //axios.defaults.withCredentials = true;//设置跨域
    Vue.prototype.$moment = moment; //日期格式控件
    var v1 = new Vue({
        el: '#app1',
        data: {
            //评分5角星控件
            gradeValue: 4.5,
            gradeColors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            //评论分页控件：
            total4: 16,  //总页数
            pageSize4: 5,   //每页条数
            currentPage4: 1, //当前页
            //支付模态框是否显示
            payMoney: false,
            //添加评论显示控件
            addCommentsModel: true,
            //添加评论
            dialogVisible: false,
            dialogImageUrl: "",
            fileList1: [],
            addComment: {
                comments: "",
                score1: 4.9,
                score2: 4.9,
                score3: 4.9,
                file: [],
            },

            averagePrice: 57,    //人均消费
            restaurantId: 1,     //店铺id
            menuId: 1,           //菜单id
            searchInput: "", //搜索输入框
            searchSelect: "",//搜索下拉框
            opends: ['1', '2'],
            searchReminderData: ["金牌泰香米", "万州烤全鱼", "瓜西西火锅", "锅锅烤鸭", "五香串串"],
            menuDatas: {   //菜单
                menuId: 0,
                type: "",
                menuName: "",
                price: 0.01,
                description: "",
                discounts: 0.01,
                vip_price: 0.01,
                integral: 0,
                status: 0,
                saleNum: 0,
            },
            restImgs: [{    //店铺的图片
                id: 0,
                imgs: [""]
            }],
            restData: [{    //店铺组
                restaurantId: 0,
                shopName: "",
                tel: "",
                address: "",
                status: "",
                longtitude: 0.1,
                latitude: 0.1,
                income: 0.1,
            }],
            menuImgs: [""],     //菜单的图片
            menuComments: [{     //评论
                id: 0,
                menuId: 0,
                userId: 0,
                comments: "",
                score: 0.1,
                commData: "",
            }],
            menuCommImgs: [{     //评论图片
                id: 0,
                userName: "",
                imgs: [""],
            }],
            visible: false,
            activeIndex: '1'

        },
        mounted: function () {
            var _this = this;
            //初始渲染页面获取数据
            axios.get('http://localhost:8080/getMessageByRestaurantId', {
                params: {
                    menuId: _this.menuId
                }
            })
                .then(function (resp) {
                    console.log(resp);
                    if (resp.data.success) {
                        let data = resp.data.data;
                        _this.restData = data.restData;
                        _this.restImgs = data.restImgs;
                        _this.menuDatas = data.menuDatas;
                        _this.menuImgs = data.menuImgs;

                    } else {
                        _this.$message({
                            showClose: true,
                            message: resp.data.message,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })

            //获取评论数据
            this.commentsQuery(this.currentPage4, this.pageSize4, this.menuId);
            //获取菜品id，当前菜单那是否未评论
            axios.get('http://localhost:8080/getMenuIdAndCommentsStatus', {
                params: {
                    menuId: _this.menuId
                }
            })
                .then(function (resp) {
                    console.log(resp);
                    if (resp.data.success) {
                        let data = resp.data.data;
                        _this.menuId = data.menuId;
                        _this.addCommentsModel = data.addCommentsModel;
                    } else {
                        _this.$message({
                            showClose: true,
                            message: resp.data.message,
                            type: 'error',
                            duration: 1500
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })

        },
        methods: {
            //提交评论的事件
            fileChanges(file, fileList) {
                console.log("图片改变");
                console.log(file);
                console.log(fileList);
                for (let i in fileList) {
                    this.addComment.file[i] = fileList[i].raw;
                }
            },
            uploadFile(file) {
                console.log("添加图片");
                console.log(file);
                this.addComment.file.append(file.file);
            },
            submitCommentFileUpload() {
                console.log("提交图片");
                var that = this;
                var data = new FormData();
                if (that.addComment.file.length != 0) {
                    for (let i in that.addComment.file) {
                        data.append("files", that.addComment.file[i]);
                    }
                }
                data.append("tel", "13245674567");
                data.append("cinemaId","21");
                $.ajax({
                    url: 'http://localhost:8351/author/getTelCode',
                    type: 'post',
                    dataType: 'json',
                    // data: $("#form1").serialize(),
                    data: data,
                    processData: false,//提交数据不做处理
                    contentType: false,//不指定提交的数据类型
                    traditional: true,
                    //设置跨域问题
                    //xhrFields: {withCredentials: true},
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        if (data.success == true) {
                            that.$message.success("评论添加成功");
                        } else {
                            that.$message.error(data.message);
                        }
                    },
                    error: function (x, s, e) {
                        console.log(x);
                        console.log(s);
                        console.log(e);
                    }
                });
            },
            handleCommentFileRemove(file, fileList) {   //文件列表移除文件时的钩子
                console.log("移除图片");
                console.log(file, fileList);
            },
            handleCommentFilePreview(file) {    //点击图片
                console.log("点击图片");
                console.log(file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            showMoney(shop) {      //立即预定按钮 点击显示支付模态框
                // this.payMoney = true;
                var _this = this;
                $.ajax({
                    url: "http://localhost:8080/alipay",
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8', //前端传json对象，缺少这个报错415
                    data: JSON.stringify(shop), //缺少这个400
                    // data:{s},
                    type: "post",
                    success: function (d) {
                        // console.log(d);
                        if (d.success) {
                            $("#payForAMenu").html(d.data);
                            _this.$message.success("正在跳转...");
                        } else {
                            _this.$message.error('请求错误' + d.message);
                        }
                    }
                });
            },
            completePay() {  //支付完成--按钮点击事件
                this.$message.success("正在跳转，请稍后...");
            },
            handleSizeChange4(i) {   //评论每页条数改变事件
                this.$message.info("显示数量改变成功");
                this.pageSize4 = i;
                this.commentsQuery(this.currentPage4, this.pageSize4, this.menuId);
            },
            handleCurrentChange4(currPageIndex) {    //评论分页跳转
                this.commentsQuery(currPageIndex, this.pageSize4, this.menuId);
            },
            commentsQuery(currentPage4, pageSize4, menuId) {    //分页查询评论
                var _this = this;
                axios.get('http://localhost:8080/getCommentsByPage', {
                    params: {
                        currentPage: currentPage4,
                        pageSize: pageSize4,
                        menuId: menuId,
                    }
                })
                    .then(function (resp) {
                        console.log(resp);
                        if (resp.data.success) {
                            let data = resp.data.data;
                            _this.menuComments = data.ipage.records;
                            _this.total4 = data.ipage.total;
                            _this.currPage = data.ipage.current;
                            _this.menuCommImgs = data.menuCommImgs;
                        } else {
                            _this.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            MethodSearchSelectChange() { //输入下拉框改变触发事件

            },
            MethodSearchReminderClick(i) {   //搜索框下方字体点击
                this.searchInput = i;
            },
            MethodClearSearchInput() {   //叉叉按钮点击事件-清空搜索框里的文字
                this.searchInput = "";
            },
            MethodBeginSearch() {        //点击搜索图标按钮-开始搜索
                var message = this.searchInput;
                var type = this.searchSelect;
                var _this = this;
                if (message == "") {
                    _this.$message({
                        showClose: true,
                        message: "请输入内容再搜索",
                        type: 'warning',
                        duration: 1500
                    });
                } else {
                    //request search
                    var _this = this;
                    axios.get('http://localhost:8080/getSearchResult', {
                        params: {
                            message: message,
                            type: type,
                        }
                    })
                        .then(function (resp) {
                            console.log(resp);
                            if (resp.data.success) {
                                let data = resp.data.data;
                                _this.tableData = data.content;
                                _this.total = data.total;
                                _this.currPage = data.currPage;

                            } else {
                                _this.$message.error('请求错误' + resp.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            handleSelect(key, keyPath) {    //顶部菜单激活信息回调
                console.log(key, keyPath);
            },
        },
        computed: {
            tableData() {
                var item = {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                };
                return Array(20).fill(item);
            },
            value4: function () {   //是否显示分页条
                if (this.total4 <= this.pageSize4) {
                    this.$message.info("分页隐藏，刷新页面重置");
                    return true;
                } else {
                    return false;
                }
            },
        }
    });
</script>
</body>

</html>